<template>
  <Dialog :appDialog="appDialog">
    <!-- 搜索 -->
    <Search ref="SearchRef" @updateContactList="getpage"></Search>
    <el-table ref="tableref" :data="props.customer" stripe style="width: 100%">
      <el-table-column width="55">
        <template #default="{ row }">
          <el-radio :key="row.id" v-model="radio1" :label="row.id" @click="radio(row)"></el-radio>
        </template>
      </el-table-column>
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column prop="words_name" label="用户姓名" align="left">
        <template v-slot="{ row }">
          <img :src="row.avatar" style="width: 2.25rem; height: 2.25rem; vertical-align: middle; margin-right: 0.625rem" />
          <span>{{ row.name }} </span>
          <img src="@/assets/chatDetails/male.png" v-if="row.sex === 1" />
          <img src="@/assets/chatDetails/female.png" v-if="row.sex === 2" />
        </template>
      </el-table-column>
      <el-table-column prop="staff_touch_nums" label="归属员工" align="center">
        <template v-slot="{ row }">
          <span>{{ row.assign_employees }}</span
          >-<template v-for="(item, index) in row.department_list" :key="index">
            <span>{{ item }}</span
            ><template v-if="index + 1 < row.department_list.length">,</template>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="contact_touch_nums" label="添加时间" align="center">
        <template v-slot="{ row }">
          <span>{{ row.created_at }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">{{ '暂无数据' }}</div>
      </template>
    </el-table>
    <ZWPagination ref="paginationRef" @submit="getpage" />
  </Dialog>
</template>
<script setup lang="ts">
  import { reactive, ref, watch, defineExpose, onMounted, defineEmits } from 'vue'
  import { store } from '@/store'
  import Search from './Search.vue'
  import Dialog from '@/components/Dialog.vue'
  import ZWPagination from './ZWPagination.vue'

  const radio1 = ref('')
  const props = defineProps(['customer', 'singleData'])
  const emit = defineEmits(['getpage', 'submitnew', 'updateSelectRow', 'updateContactList'])

  // 加载下一页
  const getpage = (data?: any) => {
    emit('updateContactList', {
      page: 1,
      page_size: data?.page_size || 15,
      ...data
    })
  }

  const selectRows: any = ref([])

  const radio = (v: any) => {
    selectRows.value = v
    console.log(selectRows.value)
  }

  // 取消选择
  const cancelnew = () => {
    appDialog.visible = false
  }
  // 保存选择
  const submitnew = () => {
    appDialog.visible = false
    emit('updateSelectRow', selectRows.value)
  }

  const appDialog = reactive({
    visible: false,
    title: '选择客户',
    width: '69.25rem',
    cancel: cancelnew,
    submit: submitnew,
    cancelText: '取消',
    submitText: '保存'
  })

  defineExpose({
    appDialog,
    radio1
  })
</script>

<style lang="scss" scoped>
  :deep .el-radio__label {
    font-size: 0;
  }
</style>
